<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/other/jquery-3.2.1.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<style>
			.shopName {
				font-size: 14px;
			}
			
			.shopItem {
				background: #F8F8FF;
			}
			
			.shopImg {
				width: 100px;
				height: 100px;
			}
			
			.mui-table-view li {
				padding-left: 12px;
			}
			
			.price {
				font-size: 20px;
				color: red;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">

			<div id="shop1" class="shopItem">
				<hr />
				<div id="shopBar" class="mui-input-row mui-checkbox mui-left">
					<label><span class="shopName">南极人官方旗舰店</span></label>
					<input name="checkbox" value="Item 1" type="checkbox">
				</div>
				<ul class="mui-table-view">
					<hr />
					<li>
						<div class="mui-input-row mui-checkbox mui-left">
							<label style="display: block;">
								<img class="shopImg" src="http://img3.imgtn.bdimg.com/it/u=3835449103,1692802266&fm=26&gp=0.jpg" />
								<img class="shopImg" src="http://img4.imgtn.bdimg.com/it/u=3907658411,2420662197&fm=26&gp=0.jpg" />
								<div><span style="font-size: 14px;">【默默家】新西兰格子哥特式安妮</span></div>
								<div><span style="font-size: 14px;color: #777777;">颜色:黑色;尺码:33inch </span></div>
								<span class="price" ></span><span style="color: red;">￥</span>
								<div style="height: 30px;" class="mui-numbox" data-numbox-step='1' data-numbox-min='1' data-numbox-max='100'>
								  <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
								  <input class="mui-numbox-input" type="number" />
								  <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
								</div>
							</label>
							<input name="checkbox" value="Item 1" type="checkbox">
						</div>
					</li>
					<hr color="lightgray" style="height: 1px;border: none;" />
					<li>
						<div class="mui-input-row mui-checkbox mui-left">
							<label style="display: block;">
								<img class="shopImg" src="http://img0.imgtn.bdimg.com/it/u=725607393,2612696721&fm=26&gp=0.jpg" />
								<img class="shopImg" src="http://img3.imgtn.bdimg.com/it/u=3011679953,2640589292&fm=26&gp=0.jpg" />
								<div><span style="font-size: 14px;">【默默家】新西兰格子哥特式安妮</span></div>
								<div><span style="font-size: 14px;color: #777777;">颜色:黑色;尺码:33inch </span></div>
								<span class="price" ></span><span style="color: red;">￥</span>
								<div style="height: 30px;" class="mui-numbox" data-numbox-step='1' data-numbox-min='1' data-numbox-max='100'>
								  <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
								  <input class="mui-numbox-input" type="number" />
								  <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
								</div>
							</label>
							<input name="checkbox" value="Item 1" type="checkbox">
						</div>
					</li>
					<hr color="lightgray" style="height: 1px;border: none;" />
					<li>
						<div class="mui-input-row mui-checkbox mui-left">
							<label style="display: block;">
								<img class="shopImg" src="http://img1.imgtn.bdimg.com/it/u=1284427186,3365310307&fm=26&gp=0.jpg" />
								<img class="shopImg" src="http://img4.imgtn.bdimg.com/it/u=1071416834,2835016064&fm=26&gp=0.jpg" />
								<div><span style="font-size: 14px;">【默默家】新西兰格子哥特式安妮</span></div>
								<div><span style="font-size: 14px;color: #777777;">颜色:黑色;尺码:33inch </span></div>
								<span class="price" ></span><span style="color: red;">￥</span>
								<div style="height: 30px;" class="mui-numbox" data-numbox-step='1' data-numbox-min='1' data-numbox-max='100'>
								  <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
								  <input class="mui-numbox-input" type="number" />
								  <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
								</div>
							</label>
							<input name="checkbox" value="Item 1" type="checkbox">
						</div>
					</li>
					<hr />
				</ul>

			</div>

			<div style="margin-top: 15px;background: #FFFFFF;">
				<div style="padding: 8px;display: block;" align="right">
					<div style="display: inline-block;margin-right: 120px;">
						<p style="line-height:50px"><span id="label_total" style="color: red;font-size: 16px;">总计 :0￥</span></p>
					</div>
					<button id="btn_settlement" class="mui-btn-danger" style="height: 50px;">去结算(0)</button>
				</div>
			</div>

		</div>
		<script>
			//商店全选监听
			mui('#shopBar').on('change', 'input', function() {
				var value = this.checked;
				var shopCheckBoxList = document.querySelectorAll('ul li input');
				for(var i = 0; i <= shopCheckBoxList.length - 1; i++) {
					shopCheckBoxList[i].checked = value;
				}
			});

			var numberList = document.querySelectorAll('.mui-numbox-input'); //商品数目组件
			var priceList = document.querySelectorAll('.price'); //总价组件
			var unitPriceList = new Array(99, 128, 12); //单价

			for(var i = 0; i <= numberList.length - 1; i++) {
				priceList[i].innerHTML = unitPriceList[i]; //设置单价
				//jquery给 numberBox组件储存index索引
				$(numberList[i]).data('index', i);
				numberList[i].addEventListener('change', function(e) {
					//alert(this.value + " " + typeof(this.value));
					var shopNumber = this.value; //商品个数
					var index = $(this).data('index');
					var unitPrice = unitPriceList[index];
					var totalPrice = shopNumber * unitPrice; //总价
					priceList[index].innerHTML = totalPrice;
					var pay = getPayTotal();
					$("#label_total").text("总计 : " + pay + "￥");
					$("#btn_settlement").text("去结算(" + pay + ")");
				});

			}

			function getPayTotal() {
				var pay = 0;
				for(var i = 0; i <= numberList.length - 1; i++) {
					pay += parseInt(priceList[i].innerText);
				}
				return pay;
			}
		</script>
	</body>

</html>